<!--Address地址管理-->
<template>
  <div class="address">
    <div class="address-header">
      <mt-header title="地址管理">
        <router-link to="/my" slot="left">
          <mt-button icon="back"></mt-button>
        </router-link>
      </mt-header>
    </div>
    <div class="address-message" v-show='isChange'>
      <ul>
        <li v-for="(item,key) in addressMessage" :key="key" v-show='addressMessage.length !=0'>
          <div class="message-info">
            <div class="info-item">
              <p><span>{{item.recipients}}</span><span>{{item.phone}}</span></p>
              <p>{{item.area}}{{item.address}}</p>
              <a class='backgrounds' @click='del(item.addr_id)'><i class="iconfont icon-del"></i>删除</a>
            </div>
            <div class="info-item1">
              <div class="item-l"><input type="radio" :value="item.type" :checked='item.is_default == 1' @click='check(item.addr_id)'><span>设为默认</span></div>
              <div class="item-r" @click='changeAdd(item.addr_id)'>
                <i class="iconfont icon-xiugaiziliao"></i><span>编辑</span>
              </div>
            </div>
          </div>
        </li>
      </ul>
      <div class='warm' v-show='addressMessage.length == 0'>
        <p>您尚未添加地址,点击添加</p>
      </div>
      <router-link class="btn" tag='div' to='add_address'>
        <mt-button type="primary" class="backgrounds">+新增收货地址</mt-button>
      </router-link>
    </div>
    <div class="address-changesMessage">
      <div class='message'  v-show='!isChange'>
        <ul>
          <li>
            <div><span>联系人</span></div><div><input type="text" placeholder="请输入您的名字" v-model='name'></div>
          </li>
          <li>
            <div><span>手机号</span></div><div><input type="tel" placeholder="请输入您的联系方式" maxlength='11' v-model='phone'></div>
          </li>
          <li @click="alertPopup"  class="clamp">
            <div><span>所在区域</span></div><div>
            <span v-text="myAddressProvince" v-model='myAddressProvince'></span>
            <span v-text="myAddressCity" v-model='myAddressCity'></span>
            <span v-text="myAddresscounty" v-model='myAddresscounty' style='overflow: hidden;width: 33.33%'></span>
          </div>
          </li>
          <li>
            <div><span>详细地址</span></div><div><input type="text" placeholder="请输入详细地址" v-model='address'></div>
          </li>
        </ul>
        <div class='btn'>
          <mt-switch v-model="value">设为默认地址</mt-switch>
          <mt-button class='primary backgrounds' type="primary" @click='addr_upd'>确定修改</mt-button>
        </div>
      </div>
      <div class='modal'>
        <mt-popup
                v-model="popupVisible"
                position="bottom">
          <mt-picker :slots="myAddressSlots" @change="onMyAddressChange"></mt-picker>
        </mt-popup>
      </div>
    </div>
  </div>
</template>
<script typy="text/ecmascript-6">
    import myaddress from '../add.json'     //引入省市区数据
    export default {
        data () {
            return {
                isChecked: true,
                isChange: true,
                addressMessage: [],
                name: '',
                phone: '',
                address: '',
                value: false,
                popupVisible: false,
                myAddressSlots: [
                    {
                        flex: 1,
                        defaultIndex: 1,
                        values: Object.keys(myaddress),  //省份数组
                        className: 'slot1',
                        textAlign: 'center'
                    }, {
                        divider: true,
                        content: '-',
                        className: 'slot2'
                    }, {
                        flex: 1,
                        values: [],
                        className: 'slot3',
                        textAlign: 'center'
                    },
                    {
                        divider: true,
                        content: '-',
                        className: 'slot4'
                    },
                    {
                        flex: 1,
                        values: [],
                        className: 'slot5',
                        textAlign: 'center'
                    }
                ],
                myAddressProvince: '省',
                myAddressCity: '市',
                myAddresscounty: '区/县',
                addr_id:''
            }
        },
        created(){
            const that = this;
            const params = {
                token:that.getToken()
            }
            const url = that.getUrl('home/addr_list');
            that.$http.post(url,params,{emulateJSON: true}).then(function (res) {
                if(res.data.code === 0){
                    that.addressMessage = res.data.data
                }else {
                    this.$messagebox('提示', res.data.errMsg);
                    return false
                }
            }, function (err) {
                this.$messagebox('提示', '找不到服务器，请稍后再试');
            })
        },
        methods:{
            del(id){
//            删除地址
                const that = this;
                const params = {
                    token:that.getToken(),
                    addr_id:id
                }
                const url = that.getUrl('home/addr_del');
                that.$messagebox.confirm('确定执行此操作?').then(action => {
                    that.$http.post(url,params,{emulateJSON: true}).then(function (res) {
                        if(res.data.code === 0){
                            const params1 = {
                                token:that.getToken()
                            }
                            const url1 = that.getUrl('home/addr_list');
                            that.$http.post(url1,params1,{emulateJSON: true}).then(function (res) {
                                if(res.data.code === 0){
                                    that.addressMessage = res.data.data
                                }else {
                                    return false
                                }
                            }, function (err) {})
                        }else {
                            this.$messagebox('提示', res.data.errMsg);
                            return false
                        }
                    }, function (err) {
                        this.$messagebox('提示', '找不到服务器，请稍后再试');
                    })
                });
            },
            check(addr_id){
                //            设为默认
                const that = this;
                const params = {
                    token:that.getToken(),
                    addr_id:addr_id
                }
                const url = that.getUrl('home/set_default');
                that.$http.post(url,params,{emulateJSON: true}).then(function (res) {
                    if(res.data.code === 0){
                        const params1 = {
                            token:that.getToken()
                        }
                        const url1 = that.getUrl('home/addr_list');
                        that.$http.post(url1,params1,{emulateJSON: true}).then(function (res) {
                            if(res.data.code === 0){
                                that.addressMessage = res.data.data
                            }else {
                                return false
                            }
                        }, function (err) {})
                    }else {
                        this.$messagebox('提示', res.data.errMsg);
                        return false
                    }
                }, function (err) {
                    this.$messagebox('提示', '找不到服务器，请稍后再试');
                })
            },
            changeAdd(id){
                const that = this;
                this.isChange = !this.isChange;
                const arr = that.addressMessage;
                var arr1 = [];
                for(var key in arr){
                    if(arr[key].addr_id == id){
                        arr1 = arr[key]
                    }
                }
              that.name = arr1.recipients;
               that.phone = arr1.phone;
               that.address = arr1.address;
               that.value = arr1.is_default == 1?true:false;
                that.addr_id = id;
            },
            alertPopup() {
                this.popupVisible = !this.popupVisible
            },
            onMyAddressChange(picker, values) {
                if(myaddress[values[0]]){  //这个判断类似于v-if的效果（可以不加，但是vue会报错，很不爽）
                    picker.setSlotValues(1,Object.keys(myaddress[values[0]])); // Object.keys()会返回一个数组，当前省的数组
                    picker.setSlotValues(2,myaddress[values[0]][values[1]]); // 区/县数据就是一个数组
                    this.myAddressProvince = values[0];
                    this.myAddressCity = values[1];
                    this.myAddresscounty = values[2];
                }
            },
            addr_upd(){//修改地址
                const that = this;
                const params = {
                    token:that.getToken(),
                    user_name:that.name,
                    phone:that.phone,
                    address:that.address,
                    area:that.myAddressProvince+that.myAddressCity+that.myAddresscounty,
                    is_default:that.value == false?2:1,
                    addr_id:that.addr_id
                }
                const url = that.getUrl('/home/addr_upd');
                that.$http.post(url,params,{emulateJSON: true}).then(function (res) {
                    if(res.data.code === 0){//修改成功，再次请求更新列表
                        that.$messagebox('提示', res.data.data).then(res =>{
                            const params1 = {
                                token:that.getToken()
                            }
                            const url = that.getUrl('home/addr_list');
                            that.$http.post(url,params1,{emulateJSON: true}).then(function (res) {
                                if(res.data.code === 0){
                                    that.addressMessage = res.data.data
                                }
                            },err =>{
                                that.$messagebox('提示', '找不到服务器，请稍后再试');
                            })
                            that.isChange = !that.isChange
                        });

                    }else {
                        this.$messagebox('提示', res.data.errMsg);
                        return false
                    }
                    that.message = '';
                    that.name = '';
                    that.phone = '';
                    that.address  = '';
                    that.message = '';
                }, function (err) {
                    this.$messagebox('提示', '找不到服务器，请稍后再试');
                })
            }
        },
        mounted(){
            this.$nextTick(() => { //vue里面全部加载好了再执行的函数  （类似于setTimeout）
                this.myAddressSlots[0].defaultIndex = 0
                // 这里的值需要和 data里面 defaultIndex 的值不一样才能够初始化
                //因为我没有看过源码（我猜测是因为数据没有改变，不会触发更新）
            });
        }


    }
</script>
<style  lang="less" rel="stylesheet/less">
  @import "../../lib/less/variable";
  .address{
    width: 100%;
    .address-header{
      header{
        background: #fff;
        color: #666;
      }
    }
    .address-message{
      width: 100%;
      .warm{
        text-align: center;
        margin-top: 50%;
        p{
          .fs(16);
        }


      }
      ul{
        border-top:2px solid #ccc;
        li{
          .mb(10);
          .fs(15);
          background: #fff;
          .message-info{
            .padding(5,10);
            .info-item{
              position: relative;
             p{
               .pb(5);
               overflow: hidden;
               text-overflow: ellipsis;
               display: -webkit-box;
               -webkit-line-clamp: 1;
               -webkit-box-orient: vertical;
               word-break: break-word;
             }
              span:last-child{
                .pl(10)
              }
              a{
                position: absolute;
                .top(0);
                .right(0);
                color: #ccc;
                display: inline-block;
                i{
                  .padding(0,5)
                }
              }
            }
            .info-item1{
              position: relative;
              .item-l{
                .h(30);
                .lh(30);
                input{
                  .w(15);
                  .h(15);
                  .mr(5)
                }
              }
              .item-r{
                position: absolute;
                .top(5);
                .right(20);
                span{
                  vertical-align: initial;
                }
              }
            }
          }
        }
      }
    }
    .address-changesMessage{
      width: 100%;
      .message{
        width: 100%;
        ul{
          .padding(0,10);
          li{
            width: 100%;
            .h(60);
            .lh(60);
            border-bottom: 1px solid #ccc;

            div{
              display: inline-block;
              .fs(16);
              input{
                background:transparent;
                width: 100%;
                color: #666;
              }
              input:-moz-placeholder, textarea:-moz-placeholder {
                /* Mozilla Firefox 4 to 18 */
                color: #ccc;
              }
            }
            div:first-child{
              width: 30%;
            }
            div:last-child{
              width: 70%;
            }
          }
        }
        .address{
          overflow: hidden;
        }
        .btn{
          .mt(10);
          .padding(0,10);
          .fs(15);
        }
      }
      .modal{
        width:100%;
        .mint-popup{
          width:100%;
        }
      }
    }

    .btn{
      text-align: center;
      .mt(10);
      .mb(60);
      .primary{
        .mt(10);
      }
    }
    .v-modal{
      background:#fff;
      opacity: 1;
      width: 100%;
    }
    .mint-popup{
      width: 100%;
    }
    .need{
      background: #fff;
      .header{
        .h(40);
        .padding(5,10);
        box-sizing: border-box;
        span:first-child{
          display: inline-block;
          .w(4);
          height: 100%;
          background:#0F7ADA ;
        }
        span:last-child{
          .ml(10);
          .fs(16);
          color: #000;
          font-weight: bold;
        }
      }
      .message{
        width: 100%;
        ul{
          .padding(0,10);
          li{
            width: 100%;
            .h(60);
            .lh(60);
            border-bottom: 1px solid #ccc;

            div{
              display: inline-block;
              .fs(16);
              input{
                background:transparent;
                width: 100%;
              }
              input[placeholder]{
                color: #ccc;
              }
            }
            div:first-child{
              width: 30%;
            }
            div:last-child{
              width: 70%;
            }
          }
        }
        .address{
          overflow: hidden;
        }
      }
      .modal{
        width:100%;
        .mint-popup{
          width:100%;
        }
      }

    }
  }
</style>
